<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="widget-body">
				<form @submit="formSubmit">
					<!-- 提现佣金 -->
					<view class="widget widget__capital m-top20 b-f dis-flex flex-dir-column">
						<view class="widget__capital-title dis-flex flex-y-center col-9 f-30">
							<!-- {{ words.withdraw_apply.words.money.value }} -->
							余额充值
						</view>
						<view class="capital__item dis-flex flex-y-center f-bold f-40">
							<view>￥</view>
							<view class="item__right flex-box">
								<input name="money" placeholder="请输入要充值的金额"
									class="f-60" placeholder-class="f-30"></input>
							</view>
						</view>
						<view class="blance" @tap.stop.prevent="toggle('bottom')">
							<view class="title">
								选择充值银行卡
							</view>
							<view class="right">
								{{choseBankDesc.linked_brbankname}}
							</view>
						</view>
					</view>
					<!-- <view class="tips m-top20 f-24 col-7">注：充值金额下限为50元</view> -->
					<view class="tips m-top20 f-24 col-7">
						注：
						<view class="">
							仅支持本人银行账户进行充值
						</view>
						<view class="">
							单笔充值下限50元，上限10万元
						</view>
					</view>
					<!-- 最低提现金额 -->
					<!-- <view class="capital__lowest m-top20 f-24 col-7 t-r">
						{{ words.withdraw_apply.words.min_money.value }}{{ settlement.min_money }}元
						</view> -->
					<!-- <view class="tips m-top20 f-24 col-7">注：提现金额将转入选择的银行卡</view>
					<view class="tips m-top20 f-24 col-7">注：当天收入金额次日可提现，每次提现扣除1元手续费</view>
					 -->
					 <view v-if="lianlian.validationSms"
						class="widget widget__form m-top20 b-f dis-flex flex-dir-column">
						<view class="form__box">
							<view class="form__field dis-flex flex-y-center">
								<view class="form__radio dis-flex flex-y-center">
									<text class="f-30 f-bold">验证码</text>
								</view>
							</view>
							<view class="form__field dis-flex flex-y-center">
								<view class="field-input flex-box">
									<input name="sms" type="number" maxlength="6" placeholder="请输入验证码"
										v-model="lianlian.verifyCode"></input>
								</view>
							</view>
						</view>
					</view>
					<!-- 提交申请 -->
					<view class="form-submit">
						<button formType="submit"
							:disabled="disabled">充值</button>
					</view>
				</form>
			</view>
			<!-- 选择充值银行卡 -->
			<uni-popup ref="popup" background-color="#fff" >
				<view class="chose-bank">
					<view class="title">
						选择充值银行卡
					</view>
					<view class="bank-list">
						<view class="bank" v-for="item in bankList" :key="item.linked_acctno" @tap.stop.prevent="choseBank(item)">
							<!-- <view class="bankled"></view> -->
							<view class="">
								<view class="">{{item.linked_brbankname}}({{item.linked_acctno_pass}})</view>
								<view class="des">立即到账</view>
							</view>
							
						</view>
					</view>
					
				</view>
			</uni-popup>
			
		</view>
		<security-password :show="securityPassword.show" @close="onToggleSecurityPassword"
			@success="onSecurityPasswordSuccess"></security-password>
			 <view id="keyboardBtn2"></view>
		 <input-alert :show="inputAlert.show" title="请输入验证码" placeholder="验证码" :params="inputAlert.params"
			@cancel="onInputAlertCancel" @confirm="onInputAlertConfirm"></input-alert>
	</view>
</template>
<script>
	
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	export default {
		components: {
			navbar
		},
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				// 验证码输入框
				inputAlert: {
					show: false,
					params: null,
				},
				bankList: [],	//银行卡列表
				choseBankDesc: {
					bankNo: '',
					linked_brbankname: '请选择充值银行卡'
				}, 	//选中的银行卡
				random: {},	//随机因子
				recharge: {},
				isData: false,
				disabled: false,
				withdrawParams: null,
				securityPassword: {
					show: false,
				},
				lianlian: { // 连连
					widthdraw: true,
					validationSms: false,
					verifyCode: '',
					data: {}
				}
			}
		},
		onShow: function() {
			// 获取绑定银行卡
			this.getBankCard();
		},
		methods: {
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			dialogClose() {
				this.$refs.popup.close()
			},
			// 选择银行卡
			choseBank(item){
				this.choseBankDesc.bankNo = item.linked_acctno
					this.choseBankDesc.linked_agrtno = item.linked_agrtno
				this.choseBankDesc.linked_brbankname = item.linked_brbankname +'(' + item.linked_acctno_pass + ')'
				this.dialogClose()
			},
			// 获取绑定银行卡
			getBankCard(){
				let _this = this
				app._post_form('User/myAcctlist', {}, function(result) {
					if (1 == result.code) {
						_this.bankList = result.data //银行卡列表
					}
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},
			// 获取随机因子
			getRandom(){
				app._post_form('user/getRandom', {}, function(result) {
					if (1 == result.code) {
						
					}
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},
			/**
			 * 充值申请
			 */
			formSubmit: function(e) {
				let _this = this
				let values = e.detail.value

				// 验证充值金额
				if (!values.money || values.money.length < 1) {
					app.showError('请输入充值金额' );
					return false;
				}
				if (this.choseBankDesc.bankNo == '') {
					app.showError('请选择银行卡' );
					return false;
				}
				
				let data = {
					money: values.money,
					linked_acctno: _this.choseBankDesc.bankNo,
					linked_agrtno:_this.choseBankDesc.linked_agrtno,
					linked_acctname: _this.userInfo.address_default.name,
					id_no: _this.userInfo.address_default.ID_number
				}
				// 发送验证码
				app._post_form('user.dealer.recharge/tradecreate', {
					data: JSON.stringify(data)
				}, function(result) {
					if (1 == result.code) {
						// 显示验证码弹窗
						_this.inputAlert.show = true
						_this.recharge = result.data
					}
				}, null, function() {
					
				});
				
				// _this.withdrawParams = values;
				// if (!_this.lianlian.validationSms) {
				// 	// 先输入安全密码
				// 	_this.onToggleSecurityPassword();
				// } else {
				// 	// 输入连连密码后，直接提现
				// 	_this.requestLianlianSmsWithdraw();
				// }
				// this.initPassword()
			},
			// 取消弹窗
			onToggleInputAlert: function() {
				this.inputAlert.show = !this.inputAlert.show;
			},
			//////// 输入框弹窗回调 ////////
			// 取消
			onInputAlertCancel: function() {
				this.onToggleInputAlert();
			},
			// 确认
			onInputAlertConfirm: function(value, target, params) {
				// 校验验证码
				this.requestValidationSms(value, params);
			},
			// 校验验证码
			requestValidationSms: function(verify_code, params) {
				let _this = this
				let data = {
					sale_id: '',
					oid_partner: this.recharge.oid_partner,
					txn_seqno: this.recharge.order_no,
					total_amount: this.recharge.money,
					token: this.recharge.lianliantoken,
					verify_code: verify_code
				}
				// 充值
				app._post_form('user.dealer.recharge/sms', {
					data: JSON.stringify(data)
				}, function(result) {
					if (1 == result.code) {
						// 隐藏验证码输入框
						_this.onInputAlertCancel();
						app.showToast('充值成功');
						setTimeout(function() {
							uni.navigateTo({
							  url: './../index'
							})
						}, 1000);	
					}
				}, null, function() {
					
				});
				// paymentUtils.requestLLBalancePay(verify_code, params, (res)=> {
				// 	// 支付成功
				// 	this.onToggleInputAlert();
				// 	app.showSuccessWithDuration(500, res.msg, () => {
				// 		this.redirectToOrderIndex();
				// 	});
				// });
			},
			requestWithdraw: function() {
				if (!this.lianlian.widthdraw) {
					this.requestCommonWithdraw();
				} else {
					this.requestLianlianWithdraw();
				}
			},

			// 连连提现
			requestLianlianWithdraw: function() {
				let _this = this;
				// 按钮禁用
				_this.disabled = true;
				// 数据提交
				app._post_form('user.dealer.withdraw/submit_new', {
					data: JSON.stringify(_this.withdrawParams)
				}, function(result) {
					if (1 == result.code) {
						let token = result.data.token;
						if (0 == token) {
							// 提现申请成功
							app.showError(result.msg, () => {
								wx.navigateTo({
									url: './list',
								})
							});
						} else {
							// 需要再次进行短信验证码校验
							_this.lianlian.validationSms = true;
							_this.lianlian.data = result.data;
							app.showToast(result.msg);
						}
					}
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},

			// 连连验证码提现
			requestLianlianSmsWithdraw: function() {
				let _this = this;
				// 按钮禁用
				_this.disabled = true;
				// 数据提交
				app._post_form('user.dealer.withdraw/validationSms', {
					data: JSON.stringify(Object.assign({}, _this.lianlian.data, {
						verify_code: _this.lianlian.verifyCode
					}))
				}, function(result) {
					// 提现申请成功
					app.showError(result.msg, () => {
						_this.resetLianlian();
						wx.navigateTo({
							url: './list',
						})
					});
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},

			resetLianlian() {
				this.lianlian.validationSms = false;
				this.lianlian.verifyCode = '';
				this.lianlian.data = {};
			},

			// 其他提现
			requestCommonWithdraw: function() {
				let _this = this;
				// 按钮禁用
				_this.disabled = true;
				// 数据提交
				app._post_form('user.dealer.withdraw/submit', {
					data: JSON.stringify(_this.withdrawParams)
				}, function(result) {
					// 提交成功
					// console.log(result);
					app.showError(result.msg, () => {
						wx.navigateTo({
							url: './list',
						})
					});
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},

			/**
			 * 切换提现方式
			 */
			toggleChecked: function(e) {
				this.payment = e.currentTarget.dataset.payment;
			},
			//////// 安全密码回调 ////////
			// 切换安全密码弹窗的显示
			onToggleSecurityPassword: function() {
				this.securityPassword.show = !this.securityPassword.show;
			},
			// 密码输入正确
			onSecurityPasswordSuccess: function() {
				this.requestWithdraw();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.col-bb {
		color: #bbb;
	}

	/* 提现金额 */

	.widget__capital {
		padding: 0 30rpx;
	}

	.widget__capital .widget__capital-title {
		height: 46px;
		padding: 0;
		box-sizing: border-box;
	}

	.widget__capital .capital__item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f7f7f7;
		box-sizing: border-box;
	}

	.f-60 {
		font-size: 60rpx;
	}

	.widget__capital .capital__item:last-child {
		border-bottom: none;
	}

	.capital__lowest {
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.tips {
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	/* 提现方式 */

	.widget__form {
		padding: 10rpx 0 20rpx 0;
	}

	.widget__form .form__title {
		padding: 16rpx 35rpx;
		border-bottom: 1rpx solid #f7f7f7;
	}

	.widget__form .form__box {
		padding: 0rpx 30rpx;
	}

	.widget__form .form__field {
		height: 90rpx;
		padding: 0;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.widget__form .form__field .radio__icon {
		font-size: 38rpx;
		margin-right: 12rpx;
	}

	.widget__form .form__field .field-input input {
		background-color: #f9f9f9;
		height: 70rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	/* 提交申请 */

	.form-submit {
		margin-top: 80rpx;
		padding: 0 30rpx;
	}

	.form-submit button {
		font-size: 32rpx;
		background-color: #000;
		color: $uni-text-color-inverse;
		border-radius: 50rpx;
	}

	.form-submit button[disabled] {
		background-color: #000 !important;
		color: $uni-text-color-inverse !important;
		opacity: 0.5;
	}
	.blance{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.blance .title{
		font-size: 28rpx;
	}
	.blance .right{
		font-size: 28rpx;
		color: #9f9f9f;
		// margin-right: 40rpx;
	}
	.blance .right::after{
		content: '\e601' !important;
		font-family: 'dy-iconfont';
		color: $uni-text-color-grey;
		font-size: 34rpx;
		// position: absolute;
		// top: 50rpx;
		// right: 20rpx;
		transform: translateY(-50%);
	}
	.chose-bank{
		// border-radius: 50rpx;
		background-color: #f7f7f7;
	}
	.chose-bank .title{
		font-size: 34rpx;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: #d6d6d6 1rpx solid;
	}
	.chose-bank .bank-list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 20rpx;
		padding-top: 40rpx;
		margin-top: 10rpx;
	}
	.chose-bank .bank-list .bank{
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 100rpx;
		margin-top: 10rpx;
	}
	.chose-bank .bank-list .bankled{
		width: 30rpx;
		height: 30rpx;
		background-color: #00aaff;
		border-radius: 30rpx;
	}
	.chose-bank .bank-list .bank .des{
		font-size: 28rpx;
		color: #9f9f9f;
	}
	.recharge-number{
		padding: 20rpx 0 ;
		font-size: 24rpx;
		color: #9f9f9f;
	}
</style>
